<template>
  <!-- 右键操作菜单 -->
  <ul id="context-menu" ref="contextMenu" v-show="visible">
    <li
      class="context-menu-item"
      v-for="(item, i) in list"
      :key="i"
      @click="callBack(true, item)"
    >
      {{ item.label }}
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      list: [],
    };
  },
  methods: {
    init(params) {
      this.visible = true;
      this.list = params.list;
      this.$nextTick((_) => {
        this.$refs.contextMenu.style.top = params.event.clientY + "px";
        this.$refs.contextMenu.style.left = params.event.clientX + "px";
      });
    },
    close() {
      this.visible = false;
    },
  },
  created() {
    document.addEventListener("click", () => {
      this.visible = false;
      this.callBack(false);
    });
  },
};
</script>
<style lang="scss">
#context-menu {
  padding: 0;
  margin: 0;
  list-style: none;

  width: 120px;
  position: fixed;
  z-index: 9999;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  .context-menu-item {
    height: 36px;
    line-height: 36px;
  }
  .context-menu-item:hover {
    background-color: #ecf5ff;
    color: #66b1ff;
  }
}
</style>